<template>
  <div ref="container" style="height:150px"></div>
</template>
<script>
import { Heatmap } from '@antv/g2plot';
import { get } from "@/utils/request";
let moment = require("moment");
export default {
  data() {
    return {};
  },
  methods: {
    created() {
      fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/heatmap.json')
        .then((res) => res.json())
        .then((data) => {
          const heatmapPlot = new Heatmap(this.$refs.container, {
            data,
            type: 'density',
            xField: 'g',
            yField: 'l',
            colorField: 'tmp',
            color: '#F51D27-#FA541C-#FF8C12-#FFC838-#FAFFA8-#80FF73-#12CCCC-#1890FF-#6E32C2',
            legend: {
              position: 'bottom',
            },
            annotations: [
              {
                type: 'image',
                start: ['min', 'max'],
                end: ['max', 'min'],
                src: 'https://gw.alipayobjects.com/zos/rmsportal/NeUTMwKtPcPxIFNTWZOZ.png',
              },
            ],
          });
          heatmapPlot.render();
        });
    },
  },
  mounted() {
    this.created();
  }
}
</script>
<style scoped></style>
